---
title: Button
sidebar:
  order: 4
---

import Preview from "../../../components/Preview.astro";

Displays a button or a component that looks like a button.

## Primary

<Preview src="button?style=primary">

```dart
ShadButton(
  child: const Text('Primary'),
  onPressed: () {},
)
```

</Preview>

## Secondary

<Preview src="button?style=secondary">

```dart
ShadButton.secondary(
  child: const Text('Secondary'),
  onPressed: () {},
)
```

</Preview>

## Destructive

<Preview src="button?style=destructive">

```dart
ShadButton.destructive(
  child: const Text('Destructive'),
  onPressed: () {},
)
```

</Preview>

## Outline

<Preview src="button?style=outline">

```dart
ShadButton.outline(
  child: const Text('Outline'),
  onPressed: () {},
)
```

</Preview>

## Ghost

<Preview src="button?style=ghost">

```dart
ShadButton.ghost(
  child: const Text('Ghost'),
  onPressed: () {},
)
```

</Preview>

## Link

<Preview src="button?style=link">

```dart
ShadButton.link(
  child: const Text('Link'),
  onPressed: () {},
)
```

</Preview>

## Text and Icon

<Preview src="button?style=textIcon">

```dart
ShadButton(
  onPressed: () {},
  leading: const Icon(LucideIcons.mail),
  child: const Text('Login with Email'),
)
```

</Preview>

## Loading

<Preview src="button?style=loading">

```dart
ShadButton(
  onPressed: () {},
  leading: SizedBox.square(
    dimension: 16,
    child: CircularProgressIndicator(
      strokeWidth: 2,
      color: ShadTheme.of(context).colorScheme.primaryForeground,
    ),
  ),
  child: const Text('Please wait'),
)
```

</Preview>

## Gradient and Shadow

<Preview src="button?style=gradientShadow">

```dart
ShadButton(
  onPressed: () {},
  gradient: const LinearGradient(colors: [
    Colors.cyan,
    Colors.indigo,
  ]),
  shadows: [
    BoxShadow(
      color: Colors.blue.withOpacity(.4),
      spreadRadius: 4,
      blurRadius: 10,
      offset: const Offset(0, 2),
    ),
  ],
  child: const Text('Gradient with Shadow'),
)
```

</Preview>
